<template>
	<view class="u-page">
		
				<u-navbar back-text=""
				:leftIconColor="tksetting.titlecolor" 
				:bgColor="tksetting.color" 
				:titleStyle="{color:tksetting.titlecolor}" 
				:title="title"  
				:autoBack="true"  
				:placeholder="true">
				</u-navbar>
		
				<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
				<u--form
					labelPosition="top"
					:model="model1"
					labelWidth	="200"
					:labelStyle="labelStyle"
					ref="form1"
				>
				
				<u-form-item
					label="请选择你所在城市"
					prop="userInfo.address"
					borderBottom
					ref="item1"
					:required="true"
				>
					<u--input
						v-model="address_name"
						border="none"
						:readonly="true"
						placeholder="请选择所在城市"
					></u--input>
					
					<u-button
						slot="right"
						text="选择"
						type="success"
						size="small"
						@click="classshow=true"
					></u-button>
					
				</u-form-item>
				
				<u-button
					type="primary"
					text="立即跟新"
					customStyle="margin-top: 50px"
					:disabled="ti_status"
					@click="submit"
					:color="tksetting.color"
				>
				</u-button>
							
									
					
				</u--form>
				
			
				
				<u-picker 
				title="请选择地区"
				keyName="label"
				:show="showarea"
				:columns="arealist"
				@confirm="confirm"
				@cancel="showarea=false"
				>
				</u-picker>
				
			
				
				<u-picker
					:show="classshow"
					@cancel="classshow=false"
					@close="classshow=false" ref="uPicker" @confirm="confirm_xf" :loading="classloading" :columns="columns" keyName="label" @change="changeHandler">
				</u-picker>
		
	</view>
</template>

<script>
import {toast,wxcode,clearStorageSync, setStorageSync, getStorageSync, useRouter,checklogin} from '@/utils/utils.js'
import { Mcaptcha  } from '@/utils/mcaptcha'
import { mapState } from 'vuex';
import BASE_URL from '@/api/env.js' //引入接口共用地址
	export default {
		data() {
			return {
				title:'更新地区',
				address_name:'',
				classshow: false,
				classloading: false,
				columns: [],
				
				name_force:false,
				ti_status:false,
				labelStyle:{"font-weight":600},
				fileList1: [],
				fileList2: [],
				
				mcaptcha:'',
				disabled1: false,
				xieyi:[],
				tips: '',
				value: '',
				showCalendar: false,
				showBirthday: false,
				session_ke:'',
				areaname:'',
				model1: {
					userInfo: {
							address:''
					},
					code: '',
					imgcode:'',
					confirm_passwd:''
				},
				showSex: false,
				showarea:false,
				birthday: Number(new Date()),
				arealist: [],
				rules: {
					'userInfo.tel': [{
						type: 'string',
						required: true,
						message: '请填手机号',
						trigger: ['blur', 'change']
					}, {
						validator: (rule, value, callback) => {
							return uni.$u.test.mobile(value);
						},
						message: "请正确输入手机号格式",
						// 触发器可以同时用blur和change，二者之间用英文逗号隔开
						trigger: ["change", "blur"],
					}],
					'userInfo.code': {
						type: 'string',
						required: true,
						len: 4,
						message: '请填写4位验证码',
						trigger: ['blur']
					},
					'userInfo.pic': {
						type: 'string',
						required: true,
						message: '请上传头像',
						trigger: ['blur']
					},
					'userInfo.name': {
						type: 'string',
						required: true,
						message: '请输入昵称',
						trigger: ['blur']
					},
					'userInfo.address': {
						type: 'string',
						required: true,
						message: '请选择您所在城市',
						trigger: ['blur']
					},
					'userInfo.passwd': {
						type: 'string',
						required: true,
						min:6,
						message: '请输入6位以上密码',
						trigger: ['blur']
					},
					confirm_passwd:[{
						type: 'string',
						message: '请重复输入密码',
						trigger: ['blur']
					},
					{
						validator: (rule, value, callback) => {
							if (value != this.model1.userInfo.passwd) {
							   return false;
							}else{
							   return true;
							}
						},
						message: '两次密码不一样',
						// 触发器可以同时用blur和change，二者之间用英文逗号隔开
						trigger: ["blur","change"],
					}],
					imgcode:[{
						type: 'string',
						required:true,
						message: '请输入图形验证码',
						trigger: ['blur']
					},
					{
						validator: (rule, value, callback) => {
							let validate = this.mcaptcha.validate(value)
							return validate?true:false;
						},
						message: '验证码不正确',
						// 触发器可以同时用blur和change，二者之间用英文逗号隔开
						trigger: ["blur","change"],
					}],
					'userInfo.user': [{
						type: 'string',
						required: true,
						message: '请输入登录账号',
						trigger: ['blur']
					},
					{
						validator: (rule, value, callback) => {
							const reg = /^[a-zA-Z][a-zA-Z0-9_]*$/;
							return reg.test(value)?true:false;
						},
						message: '账号必须以字母开头，仅含字母、数字或下划线',
						// 触发器可以同时用blur和change，二者之间用英文逗号隔开
						trigger: ["blur","change"],
					}
					],
				},
			}
		},
		async onLoad(opt) {
			this.cat_xf();
			
		},
		onReady() {
			// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
			this.$refs.form1.setRules(this.rules);
		},
		onShow() {
			
		},
		computed:{
			...mapState(['tksetting'])
		},
		methods: {
			
			changeHandler(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
					
				if (columnIndex === 0) {
					// picker为选择器this实例，变化第二列对应的选项
						console.log(value[0].id)
						this.$api.citys({pid:value[0].id}).then(res => {
							picker.setColumnValues(1, res.data)
						})
				}
			},
			async cat_xf(){
					  const xf=await this.$api.citys();
					 
					  const xf_x=await this.$api.citys({pid:xf.data[0].id});
					   console.log(xf_x)
					  this.columns=[xf.data,xf_x.data];
					  
			},
			confirm_xf(e){
				this.classshow=false;
				this.address_name=e.value[1].label
				this.model1.userInfo.address=e.value[1].id
			},
			
		
		
			
			async getarealist(){
				const res=await this.$api.arealist({t1:'label',t2:'id',all:''});
				if (res.code == 0) {
					this.arealist=[res.data];
					this.showarea=true;
				}
			},
		
			async submit() {
				
				// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
				const _this=this;
				const yz=await  _this.$refs.form1.validate().then(res => {
					return true;
				}).catch(errors => {
					uni.$u.toast('请选择地址');
					return false
				})
				
				if(yz){
					
					this.ti_status=true;
					const ress= await  _this.$api.uparea(_this.model1.userInfo);
					if(ress.code==0){
						uni.$u.toast(ress.msg)
						setTimeout(function(){
							uni.navigateBack();
						},1000)
					}else{
						this.ti_status=false;
						uni.$u.toast(ress.msg)
					}
				}	
		
			},
			
			hideKeyboard() {
				uni.hideKeyboard()
			},
			
			confirm(e) {
			    this.areaname=e.value[0].label;
				this.model1.userInfo.area=e.value[0].id;
				this.showarea=false;
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1);
				this.model1.userInfo.shopewm='';
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file);
				let fileListLen = this[`fileList${event.name}`].length;
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: "uploading",
						message: "上传中",
					});
				});
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url);
					let item = this[`fileList${event.name}`][fileListLen];
					this[`fileList${event.name}`].splice(
						fileListLen,
						1,
						Object.assign(item, {
							status: "success",
							message: "",
							url: result,
						})
					);
					fileListLen++;
				}
			},
			uploadFilePromise(url) {
				let _this=this;
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url:BASE_URL + '/upload/upimg', // 仅为示例，非真实的接口地址
						filePath: url,
						name: "file",
						formData: {
							//token:getStorageSync('token')
						},
						success: (res) => {
							let shopewm=JSON.parse(res.data).data;
							resolve(shopewm)
						},
					});
				});
			},
		},
	}
</script>

<style lang="scss">
	
.u-page{
	padding: 40rpx;
}

</style>
